<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css"/>

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script>
<script src="data/voyages.js"></script>
<script src="map_style.js"></script>

<script>
var COLORS = ["#f66", "#6f6", "#66f", "#ff6", "#6ff", "#f6f", "#f96", "#fff"];

var COUNTRIES = [
  new google.maps.LatLng(52.516667, 13.383333), // DE
  new google.maps.LatLng(55.716667, 12.566667), // DK
  new google.maps.LatLng(40.433333, -3.7), // ES
  new google.maps.LatLng(48.856667, 2.350833), // FR
  new google.maps.LatLng(52.366667, 4.883333), // NL
  new google.maps.LatLng(59.35, 18.066667), // SE
  new google.maps.LatLng(51.5, -0.116667), // UK
  new google.maps.LatLng(38.883333, -77.016667) // US
];

var map;
var events = [];
var markers = [];

function initialize() {
  map = new google.maps.Map(document.getElementById('map_canvas'), {
    center: new google.maps.LatLng(47.903455, 1.909853),
    zoom: 4,
    maxZoom: 20,
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    disableDefaultUI: true,
    zoomControl: true,
    styles: style
  });

  map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById('controls'));

  // Create an array of ship events (leaving = 1, returning = -1).
  for (var i = 0; i < data.length; i++) {
    events.push({
      time: data[i].path[0].time,
      country: data[i].country,
      event: 1
    });

    var path = data[i].path;
    events.push({
      time: path[path.length - 1].time,
      country: data[i].country,
      event: -1
    });
  }

  events.sort(function(a, b) {
    return a.time.localeCompare(b.time);
  });

  var slider = document.getElementById('slider');
  slider.max = events.length - 1;
  slider.addEventListener('change', updateMarkers, false);

  // Create markers for each of the countries.
  for (var c in COUNTRIES) {
    markers.push(
      new google.maps.Marker({
        icon: new MarkerSymbol(COLORS[c]),
        position: COUNTRIES[c],
        map: map
      })
    );
  }

  updateMarkers();
}

function MarkerSymbol(color) {
  this.path = google.maps.SymbolPath.CIRCLE;
  this.fillColor = color;
  this.fillOpacity = .2;
  this.scale = 0;
  this.strokeColor = 'white';
  this.strokeWeight = .5;
};

var oldVal = 0;
var ships = [];
for (var i = 0; i < COUNTRIES.length; i++) {
  ships[i] = 0;
}

function updateMarkers() {
  var val = parseInt(document.getElementById('slider').value);

  if (val < oldVal) { // Slider moved left.
    for (var i = val; i < oldVal; i++) {
      ships[events[i].country] -= events[i].event;
    }
  } else { // Slider moved right.
    for (var i = oldVal + 1; i <= val; i++) {
      ships[events[i].country] += events[i].event;
    }
  }

  for (var i = 0; i < markers.length; i++) {
    var icon = markers[i].getIcon();
    icon.scale = ships[i] * 5;
    markers[i].setIcon(icon);
  }

  oldVal = val;
  document.getElementById('slider-label').textContent = events[val].time.substring(0, 4);
}
</script>

</head>

<body onload="initialize()">
  <div id="map_canvas"></div>
  <div id="controls" class="control">
    <label id="slider-label" class="slider-label" for="year-slider">NA</label>
    <span class="slider-wrap">
      <input type="range" id="slider" class="slider" min="0" max="0" value="0" />
    </span>
  </div>
</body>
</html>
